<script setup lang="ts">

import ProblemSearch from "@/components/ProblemSearch.vue";
import {onMounted, reactive, ref} from "vue";
import router from "@/router";
import {ElMessage} from "element-plus";

const problemSearchRef = ref()

const problemData = reactive({
  total: 0,
  rows: []
})

onMounted(async function () {
  try {
    await problemSearchRef.value.search()
    problemData.total = problemSearchRef.value.pageResult.total
    problemData.rows = problemSearchRef.value.pageResult.rows
  } catch (e: any) {
    ElMessage.warning(e)
  }
})


function updateProblemData() {
  problemData.total = problemSearchRef.value.pageResult.total
  problemData.rows = problemSearchRef.value.pageResult.rows
}

async function redirectProblemAnswer(id: string) {
  await router.push({
    path: '/client/problem/answer',
    query: {
      id: id
    }
  })
}

const pageNum = ref(1)

</script>

<template>
  <div class="search">
    <ProblemSearch :page-num="pageNum" ref="problemSearchRef" @updateProblemData="updateProblemData"/>
  </div>
  <div class="problems">
    <el-table :data="problemData.rows" stripe style="width: 100%">
      <el-table-column prop="title" label="题目" width="500" show-overflow-tooltip />
      <el-table-column label="难度" width="200">
        <template #default="scope">
          <span v-if="scope.row.difficulty === 1"><el-tag type="primary">简单</el-tag></span>
          <span v-else-if="scope.row.difficulty === 2"><el-tag type="warning">中等</el-tag></span>
          <span v-else-if="scope.row.difficulty === 3"><el-tag type="danger">困难</el-tag></span>
          <span v-else>{{ scope.row.difficulty }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="200">
        <template #default="scope">
          <el-button size="small" @click="redirectProblemAnswer(scope.row.id)">
            开始答题
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="pagination">
    <el-pagination background layout="prev, pager, next" :current-page="pageNum" @update:current-page="" :total="problemData.total"/>
  </div>
</template>

<style scoped lang="scss">
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>